<template>
  <el-table :data="tableData" :show-header="false" style="width: 100%">
    <el-table-column label="序号" width="48">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
      </template>
    </el-table-column>
    <el-table-column label="文档名称" width="320">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>文件: {{ scope.row.name }}</p>
          <p>路径: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="页眉页脚">
      <template slot-scope="scope">
        <div slot="reference" class="hdrft-wrapper">
          <el-tag size="medium">{{
            scope.row.hdrft ? "正常" : "无页眉"
          }}</el-tag>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >修复</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎/普陀/上海市普/陀区金沙江路/陀区金沙江路/陀区金.pptx",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
};
</script>

<style scoped>
.name-wrapper .el-tag--medium {
  text-overflow: ellipsis;
  overflow: hidden;
  width: -webkit-fill-available;
  vertical-align: top;
  direction: rtl;
}
</style>